<template>
  <view>
		<view class="three">
		<view class="sircle s1"><p class="s11">1044</p>今日步数</view>
		<view class="sircle s2"><p class="s22">2033</p>7日步数</view>
		<view class="sircle s3"><p class="s33">5688</p>31日步数</view>
		</view>
		<p class="title1">最近7天步数</p>
    <canvas canvas-id="fYTOoWptfhyqTjHtGhheArGiHPpJfKxI" id="fYTOoWptfhyqTjHtGhheArGiHPpJfKxI" class="charts" @touchend="tap"/>
	
		<p class="title1">最近31天步数</p>
		
			<a1></a1>
		<p class="title2">最近31天步数</p>
		<view class="table">
			<view class="small flex">
				<view>日期</view>
				<view>步数</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view class="high">1044</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view class="high">3666</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view class="high">2455</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view class="high">7777</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view  class="high">444</view>
			</view>
			<view class="small flex">
				<view>2022-11-08</view>
				<view class="high">333</view>
			</view>
		</view>
		
  </view>
</template>

<script>
import uCharts from '../../u-charts.js';
import a1 from "../../components/ucharts.vue"
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
	components:{a1},
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["1月","2月","3月","4月","5月","6月"],
            series: [
              {
                name: "数据",
								
                data: [7000,5000,4500,3000,3100,4200]
              }
            
            ]
          };
        this.drawCharts('fYTOoWptfhyqTjHtGhheArGiHPpJfKxI', res);
      }, 500);
			
    },
    drawCharts(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "line",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: "#1890FF",
        padding: [15,10,0,15],
        legend: {},
				dataPointShapeType:'hollow',
				onmovetip:true,
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2
          }
        }
      });
    },
    tap(e){
      
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

<style scoped>
  .charts{
    width: 750rpx;
    height: 500rpx;
  }
	.title1{font-size: 40rpx;font-weight: bold;text-align: center;padding: 60rpx 0;}
	.sircle{width: 200rpx;height:200rpx;background-color: none;border-radius: 50%;padding-top: 40rpx;box-sizing: border-box;line-height: 50rpx;}
	.three{display: flex;justify-content: space-around;font-size:26rpx ;color: #666;text-align: center;margin: 30rpx 0;}
	.s1{border: red 15rpx solid;}
	.s11,.s22,.s33{font-size:40rpx }
	.s11{color: red;}
	.s22{color: skyblue;}
	.s33{color: burlywood;}
	.s2{border: skyblue 15rpx solid;}
	.s3{border: burlywood 15rpx solid;}
  .table{width: 80%;margin: 0 auto;}
	.flex{display: flex;justify-content: space-around;}
	.title2{font-weight: bold;margin: 30rpx 50rpx;font-size: 40rpx}
	.small view{width: 50%;text-align: center;border: #aaa 1px solid;height: 60rpx;line-height: 60rpx;}
	.high{color: burlywood;}
</style>